<template>
  <!--稿件评估-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <v_menu :title="data.title" :site="site"></v_menu>

    <!--投稿意向-->
    <Row :gutter="16" class="wrapper">
      <i-col span="19" class="content">
        <div class="steps">
          <Steps :current="3">
            <Step title="" content="错别字校对"></Step>
            <Step title="" content="文献格式校验"></Step>
            <Step title="" content="稿件创新指数"></Step>
            <Step title="" content="投稿意向"></Step>
          </Steps>
        </div>
        <fillIn v-if="title" :title="title" :keyword="keyword" :abstract="abstract" :literature="literature"
                :mainBody="mainBody"
                @returnTitle="returnTitle" @returnKeyword="returnKeyword" @returnAbstract="returnAbstract"></fillIn>
      </i-col>
      <i-col span="5" class="navigation">
        <ngn :data="data"></ngn>
      </i-col>
    </Row>

    <Modal v-model="modal1" width="650px">
      <div slot="header" class="header">投稿意向</div>
      <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <div v-show="fillIn">
          <!--期刊专业-->
          <Row>
            <i-col span="4">
              <h2 class="JournalProfessional">期刊分类</h2>
            </i-col>
            <i-col span="20">
              <div class="label">
              <span v-for="(item,index) in JournalProfessional" class="spn" :class="{'active':item.isActive}"
                    @click="selected1(item,index)">
                 {{item.name}}
              </span>
                <div class="label" v-show="within">
                <span v-for="(item,index) in internalMedicine" class="spn" :class="{'active':item.isActive}"
                      @click="selected2(item,index)">
                 {{item.name}}
                </span>
                </div>
                <div class="label" v-show="outer">
                <span v-for="(item,index) in chirurgery" class="spn" :class="{'active':item.isActive}"
                      @click="selected3(item,index)">
                 {{item.name}}
                </span>
                </div>
              </div>
            </i-col>
          </Row>
          <!--刊发周期-->
          <Row>
            <i-col span="4">
              <h2 class="JournalProfessional">刊发周期</h2>
            </i-col>
            <i-col span="20">
              <div class="label">
                <span class="spn" :class="{'active':isActive1}" @click="unlimited1">不限</span>
                <span v-for="(item,index) in period" class="spn" :class="{'active':item.isActive}"
                      @click="selected4(item,index)">
                     {{item.value}}
                  </span>
              </div>
            </i-col>
          </Row>
          <!--影响因子-->
          <Row>
            <i-col span="4">
              <h2 class="JournalProfessional">影响因子</h2>
            </i-col>
            <i-col span="20">
              <div class="label">
                <span class="spn" :class="{'active':isActive2}" @click="unlimited2">不限</span>
                <span v-for="(item,index) in factorInfluence" class="spn" :class="{'active':item.isActive}"
                      @click="selected6(item,index)">
                 {{item.value}}
              </span>
              </div>
            </i-col>
          </Row>
          <!--期刊等级-->
          <Row>
            <i-col span="4">
              <h2 class="JournalProfessional">期刊等级</h2>
            </i-col>
            <i-col span="20">
              <div class="label">
                <span class="spn" :class="{'active':isActive3}" @click="unlimited3">不限</span>
                <span v-for="(item,index) in grade" class="spn" :class="{'active':item.isActive}"
                      @click="selected5(item,index)">
                    {{item.value}}
                  </span>
              </div>
            </i-col>
          </Row>
          <!--期刊核心-->
          <Row>
            <i-col span="4">
              <h2 class="JournalProfessional">期刊核心</h2>
            </i-col>
            <i-col span="20">
              <div class="label">
                <span class="spn" :class="{'active':isActive4}" @click="unlimited4">不限</span>
                <span v-for="(item,index) in coreJournals" class="spn" :class="{'active':item.isActive}"
                      @click="selected7(item,index)">
                    {{item.name}}
                  </span>
              </div>
            </i-col>
          </Row>
        </div>
        <!--评估内容-->
        <div v-show="content">
          <h1>评估内容</h1>
          <div class="assessmentContent">
            <!--期刊专业-->
            <Row>
              <i-col span="4">
                <h3 class="JournalProfessional">期刊分类</h3>
              </i-col>
              <i-col span="20">
                <h3>{{this.thesisAssessment.category}}</h3>
              </i-col>
            </Row>
            <!--刊发周期-->
            <Row>
              <i-col span="4">
                <h3 class="JournalProfessional">刊发周期</h3>
              </i-col>
              <i-col span="20">
                <h3>{{this.thesisAssessment.publicationCycle}}</h3>
              </i-col>
            </Row>
            <!--期刊级别-->
            <Row>
              <i-col span="4">
                <h3 class="JournalProfessional">期刊级别</h3>
              </i-col>
              <i-col span="20">
                <h3>{{this.thesisAssessment.level}}</h3>
              </i-col>
            </Row>
            <!--影响因子-->
            <Row>
              <i-col span="4">
                <h3 class="JournalProfessional">影响因子</h3>
              </i-col>
              <i-col span="20">
                <h3>{{this.thesisAssessment.comprehensiveIf}}</h3>
              </i-col>
            </Row>
            <!---->
            <Row>
              <i-col span="4">
                <h3 class="JournalProfessional">期刊核心</h3>
              </i-col>
              <i-col span="20">
                <h3>{{this.thesisAssessment.periodicalsDb}}</h3>
              </i-col>
            </Row>
          </div>
          <h1>评估结果</h1>
          <div class="assessmentContent" v-for="assessmentResult in assessmentResult">
            <Row>
              <i-col span="5">
                <p class="u_img">
                  <router-link :to="{path:'journalDetails',query:{id:assessmentResult.pid}}">
                    <img :src="assessmentResult.periodicals.photo" alt="">
                  </router-link>
                </p>
                <p class="contribute">
                  <router-link
                    :to="{path:'Mail_buy',query:{thesisId:thesisId,thesisAssessmentId:thesisAssessmentId,pid:assessmentResult.pid}}">
                    <Button>本站直投</Button>
                  </router-link>
                </p>
              </i-col>
              <i-col class="particulars" span="19">
                <p style="font-size: 15px">
                  <span>匹配指数：</span>
                  <span
                    style="font-weight: bold;font-size: 21px;color: #C13A30">{{assessmentResult.matchingDegree}}</span>
                </p>
                <p style="font-size: 15px">推荐理由</p>
                <Row :gutter="16">
                  <i-col span="12">
                    <p class="conform">
                      <span v-if="assessmentResult.reson1.split(',')[0] == 'null' ">期刊分类：</span>
                      <span v-else>期刊分类：{{assessmentResult.reson1.split(',')[0]}}</span>
                      <span style="color: #333399;float: right"
                            v-if="assessmentResult.reson1.split(',')[1] =='1' ">符合</span>
                      <span style="color: #333399;float: right" v-else>不符合</span>
                    </p>
                  </i-col>
                  <i-col span="12">
                    <p class="conform">
                      <span v-if="assessmentResult.reson2.split(',')[0] == 'null' ">期刊级别：</span>
                      <span v-else>期刊级别：{{assessmentResult.reson2.split(',')[0]}}</span>
                      <span style="color: #333399;float: right"
                            v-if="assessmentResult.reson2.split(',')[1] =='1' ">符合</span>
                      <span style="color: #333399;float: right" v-else>不符合</span>
                    </p>
                  </i-col>
                  <i-col span="12">
                    <p class="conform">
                      <span v-if="assessmentResult.reson3.split(',')[0] == 'null' ">刊发周期：</span>
                      <span v-else>刊发周期：{{assessmentResult.reson3.split(',')[0]}}</span>
                      <span style="color: #333399;float: right"
                            v-if="assessmentResult.reson3.split(',')[1] =='1' ">符合</span>
                      <span style="color: #333399;float: right" v-else>不符合</span>
                    </p>
                  </i-col>
                  <i-col span="12">
                    <p class="conform">
                      <span v-if="assessmentResult.reson4.split(',')[0] == 'null' ">影响因子：</span>
                      <span v-else>影响因子：{{assessmentResult.reson4.split(',')[0]}}</span>
                      <span style="color: #333399;float: right"
                            v-if="assessmentResult.reson4.split(',')[1] =='1' ">符合</span>
                      <span style="color: #333399;float: right" v-else>不符合</span>
                    </p>
                  </i-col>
                  <i-col span="12">
                    <p class="conform">
                      <span v-if="assessmentResult.reson5.split(',')[0] == 'null' ">期刊核心：</span>
                      <span v-else>期刊核心：
                          <span>
                            {{assessmentResult.reson5.substr(0,assessmentResult.reson5.lastIndexOf(','))}}
                          </span>
                        </span>
                      <span style="color: #333399;float: right"
                            v-if="assessmentResult.reson5.split(',')[assessmentResult.reson5.split(',').length-1] =='1' ">符合</span>
                      <span style="color: #333399;float: right" v-else>不符合</span>
                    </p>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </div>

        <div class="wrongWords" v-show="wrongWords">
          <Button type="info" @click="OK">确认</Button>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>

    <div class="wrongWords">
      <Button type="info" class="btn1" @click="verify">下一步</Button>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import tag from '../module/Tag'
  import fillIn from '../module/fillIn'
  import v_menu from '../module/menu'
  import ngn from '../module/ngn'

  export default {
    components: {carousel, tag, fillIn, v_menu, ngn},
    data() {
      return {
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        /*导航*/
        site: '投稿意向',
        data: {
          title: '论文投稿',
          list: [
            {list: '投稿流程', link: '/contributeProcess'},
            {list: '投稿指南', link: '/contributeGuide'},
          ]
        },
        /**/
        modal1: false,
        spinShow: false,
        /*期刊专业*/
        JournalProfessional: [],
        allowList1: [],
        /*刊发周期*/
        period: [],
        allowList4: [],
        /*期刊等级*/
        grade: [],
        allowList5: [],
        /*影响因子*/
        factorInfluence: [],
        allowList6: [],
        /*期刊核心*/
        coreJournals: [],
        allowList7: [],
        /*内科学*/
        internalMedicine: [],
        within: false,
        allowList2: [],
        /*外科学*/
        chirurgery: [],

        outer: false,
        allowList3: [],
        /*不限*/
        isActive1: false,
        isActive2: false,
        isActive3: false,
        isActive4: false,
        /*稿件评估数据*/
        object: {
          thesisAssessment: {
            comprehensiveIf: '',
            level: '',
            publicationCycle: '',
            category: '',
            periodicalsDb: ''
          },
          thesis: {
            cTitle: '',
            eTitle: '',
            fundType: '',
            cAbstract: '',
            eAbstract: '',
            cKeys: '',
            eKeys: '',
          },
        },
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: '',
        /*评估内容*/
        thesis: {
          cTitle: '',
          eTitle: '',
          fundType: '',
          cAbstract: '',
          eAbstract: '',
          cKeys: '',
          eKeys: '',
          id: '',
        },
        thesisAssessment: {
          comprehensiveIf: '',
          level: '',
          publicationCycle: '',
          category: '',
          periodicalsDb: '',
        },
        /*填写评估*/
        fillIn: true,
        /*评估内容*/
        content: false,
        /*评估内容、评估结果的id*/
        thesisAssessmentId: '',
        thesisId: '',
        assessmentResult: [],


        title: '',
        keyword: '',
        abstract: '',
        literature: '',
        mainBody: '',

        wrongWords: true,
      }
    },
    created() {
      if (this.$route.query.id) {
        this.fillIn = false;
        this.content = true;
        this.$axios.get(this.$api.url + '/thesis/select/thesis/' + this.$route.query.id).then((res) => {
          this.thesisAssessment = res.data.data.thesisAssessment;
          this.thesis = res.data.data
        });
      }
    },
    mounted() {
      this.dataArray();
      window.scrollTo(0, 0);
      setTimeout(this.return(), 5000);
    },
    methods: {
      returnTitle(data) {
        this.value1 = data
      },
      returnKeyword(data) {
        this.value6 = data
      },
      returnAbstract(data) {
        this.value4 = data
      },

      dataArray() {
        /*期刊专业*/
        this.$axios.get(this.$api.url + '/periodicals/category/list/0').then((res) => {
          this.JournalProfessional = res.data.data;
        });
        /*刊发周期、期刊等级、影响因子*/
        this.$axios.get(this.$api.url + '/dictionary/List').then((res) => {
          this.period = res.data.publication_cycle;
          this.grade = res.data.level;
          this.factorInfluence = res.data.combined_if;
        });
        /*期刊核心*/
        this.$axios.get(this.$api.url + "/periodicals/db/AllPeriodicalsDb").then((res) => {
          this.coreJournals = res.data
        });
      },
      /*选择单个的*/
      selected1(item, index) {
        item.isActive = !item.isActive;
        if (item.name != "内科学" && item.name != "外科学") {
          this.allowList1 = [];
          for (let i = 0; this.JournalProfessional.length > i; i++) {
            if (this.JournalProfessional[i].isActive == true) {
              this.allowList1.push(this.JournalProfessional[i]);
              this.allowList1 = [...new Set(this.allowList1)];
            }
          }
        } else {
          item.isActive = false;
          if (item.name == "内科学") {
            this.$axios.get(this.$api.url + '/periodicals/category/list/' + item.id).then((res) => {
              if (res.data.data.length > 0) {
                this.within = !this.within;
                this.outer = false;
                this.internalMedicine = res.data.data
              }
            });
          }
          if (item.name == "外科学") {
            this.$axios.get(this.$api.url + '/periodicals/category/list/' + item.id).then((res) => {
              if (res.data.data.length > 0) {
                this.outer = !this.outer;
                this.within = false;
                this.chirurgery = res.data.data
              }
            });
          }
        }
      },
      selected2(item, index) {
        item.isActive = !item.isActive;
        this.allowList2 = [];
        for (let i = 0; this.internalMedicine.length > i; i++) {
          if (this.internalMedicine[i].isActive == true) {
            this.allowList2.push(this.internalMedicine[i]);
            this.allowList2 = [...new Set(this.allowList2)];
          }
        }
      },
      selected3(item, index) {
        item.isActive = !item.isActive;
        this.allowList3 = [];
        for (let i = 0; this.chirurgery.length > i; i++) {
          if (this.chirurgery[i].isActive == true) {
            this.allowList3.push(this.chirurgery[i]);
            this.allowList3 = [...new Set(this.allowList3)];
          }
        }
      },
      selected4(item, index) {
        item.isActive = !item.isActive;
        this.allowList4 = [];
        for (let i = 0; this.period.length > i; i++) {
          if (this.period[i].isActive == true) {
            this.allowList4.push(this.period[i]);
            this.allowList4 = [...new Set(this.allowList4)];
          }
        }
      },
      selected5(item, index) {
        item.isActive = !item.isActive;
        this.allowList5 = [];
        for (let i = 0; this.grade.length > i; i++) {
          if (this.grade[i].isActive == true) {
            this.allowList5.push(this.grade[i]);
            this.allowList5 = [...new Set(this.allowList5)];
          }
        }
      },
      selected6(item, index) {
        item.isActive = !item.isActive;
        this.allowList6 = [];
        for (let i = 0; this.factorInfluence.length > i; i++) {
          if (this.factorInfluence[i].isActive == true) {
            this.allowList6.push(this.factorInfluence[i]);
            this.allowList6 = [...new Set(this.allowList6)];
          }
        }
      },
      selected7(item, index) {
        item.isActive = !item.isActive;
        this.allowList7 = [];
        for (let i = 0; this.coreJournals.length > i; i++) {
          if (this.coreJournals[i].isActive == true) {
            this.allowList7.push(this.coreJournals[i]);
            this.allowList7 = [...new Set(this.allowList7)];
          }
        }
      },
      /*不限*/
      unlimited1() {
        this.isActive1 = !this.isActive1
      },
      unlimited2() {
        this.isActive2 = !this.isActive2
      },
      unlimited3() {
        this.isActive3 = !this.isActive3
      },
      unlimited4() {
        this.isActive4 = !this.isActive4
      },
      verify() {
        this.modal1 = true;
      },
      OK() {
        this.spinShow = true;
        this.wrongWords = false;
        /*期刊专业*/
        this.object.thesisAssessment.category = [];
        for (let a = 0; this.allowList1.length > a; a++) {
          this.object.thesisAssessment.category.push(this.allowList1[a].name)
        }
        for (let b = 0; this.allowList2.length > b; b++) {
          this.object.thesisAssessment.category.push(this.allowList2[b].name)
        }
        for (let c = 0; this.allowList3.length > c; c++) {
          this.object.thesisAssessment.category.push(this.allowList3[c].name)
        }
        this.object.thesisAssessment.category = [...new Set(this.object.thesisAssessment.category)];
        this.object.thesisAssessment.category = this.object.thesisAssessment.category.join(',');
        /*发刊周期*/
        this.object.thesisAssessment.publicationCycle = [];
        for (let e = 0; this.allowList4.length > e; e++) {
          this.object.thesisAssessment.publicationCycle.push(this.allowList4[e].value)
        }
        this.object.thesisAssessment.publicationCycle = [...new Set(this.object.thesisAssessment.publicationCycle)];
        this.object.thesisAssessment.publicationCycle = this.object.thesisAssessment.publicationCycle.join(',');
        /*期刊等级*/
        this.object.thesisAssessment.level = [];
        for (let f = 0; this.allowList5.length > f; f++) {
          this.object.thesisAssessment.level.push(this.allowList5[f].value)
        }
        this.object.thesisAssessment.level = [...new Set(this.object.thesisAssessment.level)];
        this.object.thesisAssessment.level = this.object.thesisAssessment.level.join(',');
        /*影响因子*/
        this.object.thesisAssessment.comprehensiveIf = [];
        for (let f = 0; this.allowList6.length > f; f++) {
          this.object.thesisAssessment.comprehensiveIf.push(this.allowList6[f].value)
        }
        this.object.thesisAssessment.comprehensiveIf = [...new Set(this.object.thesisAssessment.comprehensiveIf)];
        this.object.thesisAssessment.comprehensiveIf = this.object.thesisAssessment.comprehensiveIf.join(',');
        /*期刊核心*/
        this.object.thesisAssessment.periodicalsDb = [];
        for (let f = 0; this.allowList7.length > f; f++) {
          this.object.thesisAssessment.periodicalsDb.push(this.allowList7[f].name)
        }
        this.object.thesisAssessment.periodicalsDb = [...new Set(this.object.thesisAssessment.periodicalsDb)];
        this.object.thesisAssessment.periodicalsDb = this.object.thesisAssessment.periodicalsDb.join(',');

        if (this.value1 != '') {
          this.object.thesis.cTitle = this.value1;
          if (this.value4 != '') {
            this.object.thesis.cAbstract = this.value4;
            if (this.value6 != '') {
              this.object.thesis.cKeys = this.value6;
              this.post()
            } else {
              this.$Message.warning('中文关键词不能为空！');
            }
          } else {
            this.$Message.warning('中文摘要不能为空！');
          }
        } else {
          this.$Message.warning('中文题目不能为空！');
        }
      },
      post() {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(this.object),
          url: this.$api.url + '/thesis/add/thesis',
        }).then((res) => {
          if (res.data.data != "") {
            this.spinShow = false;
            this.thesisAssessmentId = res.data.data.thesisAssessmentId;
            this.thesisId = res.data.data.thesisId;
            this.fillIn = false;
            this.content = true;
            this.get();
          }
        })
      },
      get() {
        this.$axios.get(this.$api.url + '/thesis/selectParticularsById/' + this.thesisId).then((res) => {
          this.thesis.cTitle = res.data.cTitle;
          this.thesis.eTitle = res.data.eTitle;
          this.thesis.fundType = res.data.fundType;
          this.thesis.cAbstract = res.data.cAbstract;
          this.thesis.eAbstract = res.data.eAbstract;
          this.thesis.cKeys = res.data.cKeys;
          this.thesis.eKeys = res.data.eKeys;
          this.thesis.id = res.data.id;
        });
        this.$axios.get(this.$api.url + '/thesis/assessment/result/select/' + this.thesisAssessmentId).then((res) => {
          this.assessmentResult = res.data.data;
        });
        this.$axios.get(this.$api.url + '/thesis/assessment/selectById/' + this.thesisAssessmentId).then((res) => {
          this.thesisAssessment.comprehensiveIf = res.data.comprehensiveIf;
          this.thesisAssessment.category = res.data.category;
          this.thesisAssessment.level = res.data.level;
          this.thesisAssessment.publicationCycle = res.data.publicationCycle;
          this.thesisAssessment.periodicalsDb = res.data.periodicalsDb;
        });
      },
      return() {
        this.title = localStorage.getItem('returnTitle');
        this.keyword = localStorage.getItem('returnKeyword');
        this.abstract = localStorage.getItem('returnAbstract');
        this.literature = localStorage.getItem('returnLiterature');
        this.mainBody = localStorage.getItem('returnMainBody');
      }

    }
  }
</script>

<style scoped>
  /*主要内容*/
  .wrapper .content {
    border-right: 1px solid #ccc;
    min-height: 300px;
    padding-top: 20px;
  }

  .wrapper .content .steps {
    position: relative;
    left: 100px;
  }

  .wrapper .navigation {
    padding-left: 0 !important;
  }

  .wrongWords {
    text-align: center;
    margin: 20px 0;
  }

  .wrongWords .btn1 {
    background: #2b369f;
    border-color: #2b369f;
  }
  .label > .ivu-row {
    padding: 5px 0;
  }
  .label > .spn {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    margin: 5px 5px
  }
  .label > .spn:hover {
    color: rgb(0, 102, 255);
    border: 1px solid rgb(0, 102, 255);
  }
  .active {
    color: rgb(0, 102, 255) !important;
    border: 1px solid rgb(0, 102, 255) !important;
  }
  /*评估内容*/
  .assessmentContent {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
  }
  .assessmentContent .ivu-row {
    padding: 5px 0;
  }
  .u_img img {
    width: 100px;
    height: 134px;
  }
  .contribute {
    text-align: center;
    width: 100px;
  }
  .contribute .ivu-btn {
    margin-top: 10px;
    background: #2b369f;
    color: #fff;
  }
  .particulars p {
    padding: 5px 0;

  }

  .particulars .conform {
    height: 30px;
    font-size: 13px;
    border-bottom: 1px dashed #333;
  }
</style>
<style>
  .ivu-modal .ivu-modal-content .ivu-modal-header {
    background: #2b369f;
    color: #fff;
  }

  .ivu-steps-horizontal .ivu-steps-content {
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
    position: relative;
    right: 25px;
  }

  .ivu-steps .ivu-steps-head-inner {
    margin-right: 0;
  }

  .ivu-modal-close .ivu-icon-ios-close {
    color: #fff;
  }

  .ivu-modal-footer {
    border-top: none;
    padding: 0;
  }

  .ivu-modal-body {
    height: 500px;
    overflow: auto;
  }
</style>
